<!-- 菜单悬浮的原理: 通过给菜单添加position:sticky实现, 用法超简单, 仅APP端的低端机不兼容 https://caniuse.com/#feat=css-sticky -->
<template>
	<view>
		<!-- <sundeheng-custom :isBack="false">
			<block slot="content">首页</block>
		</sundeheng-custom> -->
		<!-- 对于mescroll-body: 需设置:sticky="true", 此应避免在mescroll-body标签前面加其他非定位的元素, 否则下拉区域会被挤出, 无法会隐藏.-->
		<!-- 对于mescroll-uni: 则无需设置:sticky="true", 无其他限制和要求 -->
		<mescroll-body :sticky="true" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback">
			<!-- sticky吸顶悬浮的菜单, 父元素必须是 mescroll -->
			<!-- <view class="sticky-tabs">
			</view> -->
			<!-- 搜索栏 -->
			<view class="search-wrap" :style="'padding-top:' +StatusBar+ 'px'">
				<view class="search-box">
					<view class="search-input">
						<input type="text" v-model="search" />
						<image class="search-icon" src="@/static/home/search.png"></image>
						<view class="hot-search">
							<text>中证消费指数100</text>
							<image class="large-icon" src="@/static/home/large.png"></image>
						</view>
					</view>
					<view class="message" @click="msgCenter">
						<image class="img-full" src="@/static/home/message.png"></image>
					</view>
					<view class="customer" @click="service">
						<image class="img-full" src="@/static/home/customer.png"></image>
					</view>
				</view>
			</view>
			<view class="header-box" :style="'padding-top: '+ StatusBar +'px;'">
				<view class="app-title">
					<view class="app-title-h1">
						AI期货通
					</view>
					<view class="app-title-h3">
						智能交易，从 AI 期货通开始！
					</view>
				</view>
			</view>
			<view class="home-content" :style="'margin-bottom: '+botOperateBut+'px;'">
				<!-- 菜单 -->
				<view class="main-function-menu">
					<view class="menu-item" v-for="item in menus" :key="item.clickKey" @click="navUrl(item.clickKey)">
						<image class="menu-icon" :src="item.icon"></image>
						<view class="menu-title">{{item.text}}</view>
					</view>
				</view>
				<!-- banner -->
				<view class="banner-box">
					<swiper class="swiper" circular :indicator-dots="true" indicator-color="#CCCCCC"
						indicator-active-color="#FF3B30" :autoplay="true" :interval="6000">
						<swiper-item v-for="item in banners" :key="item.id">
							<view class="banner-title">
								<view class="banner-title-left">
									<view class="title-text">
										{{item.title}}
									</view>
									<span class="active-dimension"></span>
								</view>
								<view class="banner-title-right" @click="toPrice">
									<span>全部</span>
									<image class="arrow-right" src="/static/home/arrow-right.png"></image>
								</view>
							</view>
							<view class="banner-data">
								<view class="banner-data-item" v-for="datarow in item.datarow" :key="datarow.id">
									<view class="list">
										<view class="title">{{datarow.name}}</view>
										<view class="num">{{datarow.price}}</view>
										<view class="proportion">{{datarow.ratio}}%</view>
									</view>
								</view>
							</view>
						</swiper-item>
					</swiper>
				</view>
				<!-- 新手指南 -->
				<view class="hot-msg">
					<view class="hot-title">
						<view class="hot-title-left">
							<view class="title-text">新手指南</view>
							<span class="active-dimension"></span>
						</view>
					</view>
					<view class="guide-data">
						<view class="sup">连续8年正收益，持续跑赢指数</view>
						<view class="hot">
							<view class="tip">热点推荐</view>
							<text>螺纹钢2401</text>
						</view>
						<view class="proportion">
							<view class="sup">27.6%</view>
							<view class="sub">近3日涨跌幅</view>
						</view>
						<view class="ordering">模拟下单</view>
					</view>
					<view class="subtxt">体验模拟交易，了解交易规则</view>
				</view>
				<!-- 热点资讯 -->
				<view class="hot-msg">
					<view class="hot-title">
						<view class="hot-title-left">
							<view class="title-text">热点资讯</view>
							<span class="active-dimension"></span>
						</view>
					</view>
					<view class="hot-data">
						<view class="row" @click="hotDetail">
							<view class="li">
								<view class="num">1</view>
								<view class="text">通信设备飙涨，能追高吗？</view>
							</view>
							<view class="bottom-btn">
								<view class="btn-box">
									<view class="btn" @click.stop="">不追</view>
									<view class="btn" @click.stop="">必须冲！</view>
								</view>
								<view class="incline"></view>
							</view>
						</view>
						<view class="row" @click="hotDetail">
							<view class="li">
								<view class="num">2</view>
								<view class="text">利好频出！A股开始酝酿反攻？</view>
							</view>
						</view>
						<view class="row" @click="hotDetail">
							<view class="li">
								<view class="num">3</view>
								<view class="text">汽车、家电下乡开始，机会来了</view>
							</view>
						</view>
						<view class="row" @click="hotDetail">
							<view class="li">
								<view class="num">4</view>
								<view class="text">[解读]橡胶跌近3%!然机构却称逢低是吸筹的良好契机</view>
							</view>
						</view>
					</view>
					<view class="more" @click="hotMsg">查看更多</view>
				</view>
			</view>

			<!-- 数据列表 -->
			<!-- <good-list :list="goods"></good-list> -->
		</mescroll-body>

		<!-- 此处可以写其他fixed定位元素 -->
		<!-- <view></view> -->
		<uni-tabbar-custom :current="0"></uni-tabbar-custom>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import {
		apiGoods
	} from "@/api/mock.js"

	import Socket from '@/utils/ws.js'




	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				goods: [], // 数据列表
				tabs: ['全部', '母婴', '图书'],
				tabIndex: 0, // tab下标
				StatusBar: this.StatusBar,
				search: '',
				menus: [{
					text: '模拟交易',
					icon: '/static/home/menu1.png',
					clickKey: 1.1,
				}, {
					text: 'AI策略',
					icon: '/static/home/menu2.png',
					clickKey: 1.2,
				}, {
					text: '期货开户',
					icon: '/static/home/menu3.png',
					clickKey: 1.3,
				}, {
					text: '保证金',
					icon: '/static/home/menu4.png',
					clickKey: 1.4,
				}, {
					text: '持仓数据',
					icon: '/static/home/menu5.png',
					clickKey: 1.5,
				}, {
					text: '资金流向',
					icon: '/static/home/menu6.png',
					clickKey: 1.6,
				}, {
					text: '财经日历',
					icon: '/static/home/menu7.png',
					clickKey: 1.7,
				}, {
					text: '期货快讯',
					icon: '/static/home/menu8.png',
					clickKey: 1.8,
				}],
				banners: [{
					id: 0,
					title: '热门合约',
					datarow: [{
						id: 1,
						title: '纯碱2401',
						num: '1739',
						proportion: '63.376%'
					}, {
						id: 2,
						title: '纯碱2401',
						num: '1739',
						proportion: '63.376%'
					}, {
						id: 3,
						title: '纯碱2401',
						num: '1739',
						proportion: '63.376%'
					}]
				}, {
					id: 1,
					title: '自选盯盘',
					datarow: [{
						id: 4,
						title: '纯碱2401',
						num: '1739',
						proportion: '63.376%'
					}, {
						id: 5,
						title: '纯碱2401',
						num: '1739',
						proportion: '63.376%'
					}, {
						id: 6,
						title: '纯碱2401',
						num: '1739',
						proportion: '63.376%'
					}]
				}, {
					id: 2,
					title: '国内精选',
					datarow: [{
						id: 7,
						title: '纯碱2401',
						num: '1739',
						proportion: '63.376%'
					}, {
						id: 8,
						id: 1,
						title: '纯碱2401',
						num: '1739',
						proportion: '63.376%'
					}, {
						id: 9,
						title: '纯碱2401',
						num: '1739',
						proportion: '63.376%'
					}]
				}],
				ws: ''
			}
		},
		onLoad(e) {
			uni.hideTabBar({})
		},
		onShow() {
			// this.getIndexBanner()
			this.pageDate()

		},
		methods: {
			pageDate() {

				this.$request({
					url: '/api/stock/exchangeQuote',
					method: 'get',
					data: {
						key: 'qdBMTaBwQi2ukKGmdfvipFASmT',
						exchange: 'shqh',
					},
					successCb: (res) => {
						console.log(res, '===>request')
					}
				})
			},
			/*下拉刷新的回调 */
			downCallback() {
				// 这里加载你想下拉刷新的数据, 比如刷新轮播数据
				// loadSwiper();
				// 下拉刷新的回调,默认重置上拉加载列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
				this.mescroll.resetUpScroll()
			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				// this.mescroll.optUp.use = false
				// return
				let keyword = this.tabs[this.tabIndex]
				this.mescroll.endSuccess(1); // 隐藏加载状态栏
				// apiGoods(page.num, page.size, keyword).then(res => {
				// 	if (page.num == 1) this.goods = []; //如果是第一页需手动制空列表
				// 	this.goods = this.goods.concat(res.list); //追加新数据
				// 	this.mescroll.endSuccess(res.list.length); // 隐藏加载状态栏
				// }).catch(() => {
				// 	//联网失败, 结束加载
				// 	this.mescroll.endErr();
				// })
			},
			getIndexBanner() {
				this.$request({
					url: this.$api.getIndexBanner,
					data: {},
					successCb: (res) => {
						// uni.hideLoading();
						console.log('请求成功', res)
						this.banners = res.data.map((item, i) => {
							let title = ''
							if (i === 0) {
								title = '热门合约'
							} else if (i === 1) {
								title = '自选盯盘'
							} else if (i === 2) {
								title = '国内精选'
							}
							return {
								title,
								id: i,
								datarow: item.slice(0, 3)
							}
						})
					},
					failCb(e) {
						console.log(e);
						uni.showToast({
							title: e.data.msg || '服务器异常',
							icon: "none",
							duration: 2000,
						});
					}
				});
			},
			// 切换菜单
			tabChange() {
				this.goods = []; // 置空列表,显示加载进度条
				this.mescroll.resetUpScroll()
			},
			// 消息中心
			msgCenter() {
				uni.navigateTo({
					url: '/pages/homeSubpage/msgCt/msgCt'
				});
			},
			// 客服
			service() {
				uni.navigateTo({
					url: '/pages/homeSubpage/service/service'
				});
			},
			// 行情
			toPrice() {
				uni.switchTab({
					url: '/pages/tabBar/price/price'
				});
			},
			navUrl(key) {
				switch (key) {
					case 1.1:
						uni.switchTab({
							url: '/pages/tabBar/transaction/transaction'
						});
						break;
					case 1.2:
						uni.navigateTo({
							url: '/pages/homeSubpage/strategy/strategy'
						});
						break;
					case 1.3:
						uni.showToast({
							title: '该功能暂未开放',
							icon: "none",
							duration: 2000,
						});
						// uni.navigateTo({
						// 	url: '/pages/homeSubpage/futuresKf/futuresKf'
						// });
						break;
					case 1.4:
						uni.navigateTo({
							url: '/pages/homeSubpage/guarantee/guarantee'
						});
						break;
					case 1.5:
						uni.navigateTo({
							url: '/pages/homeSubpage/depotInfo/depotInfo'
						});
						break;
					case 1.6:
						uni.navigateTo({
							url: '/pages/homeSubpage/fundFlow/fundFlow'
						});
						break;
					case 1.7:
						uni.navigateTo({
							url: '/pages/homeSubpage/dailyfx/dailyfx'
						});
						break;
					case 1.8:
						uni.navigateTo({
							url: '/pages/homeSubpage/futuresNews/futuresNews'
						});
						break;
					default:
						console.log("暂未开放");
				}
			},
			hotMsg() {
				uni.navigateTo({
					url: '/pages/homeSubpage/hotMsg/hotMsg'
				});
			},
			hotDetail() {
				uni.navigateTo({
					url: '/pages/homeSubpage/hotDetail/hotDetail'
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	/*
	sticky生效条件：
	1、父元素不能overflow:hidden或者overflow:auto属性。(mescroll-body设置:sticky="true"即可, mescroll-uni本身没有设置overflow)
	2、必须指定top、bottom、left、right4个值之一，否则只会处于相对定位
	3、父元素的高度不能低于sticky元素的高度
	4、sticky元素仅在其父元素内生效,所以父元素必须是 mescroll
	*/
	.sticky-tabs {
		z-index: 990;
		position: sticky;
		top: var(--window-top);
		background-color: #fff;
	}

	// 使用mescroll-uni,则top为0
	.mescroll-uni,
	/deep/.mescroll-uni {
		.sticky-tabs {
			top: 0;
		}
	}

	.active-dimension {
		display: inline-block;
		width: 60rpx;
		height: 10rpx;
		background: linear-gradient(90deg, #FF3B30 0%, rgba(255, 59, 48, 0) 100%);
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		margin-top: 16rpx;
	}

	.arrow-right {
		width: 46rpx;
		height: 46rpx;
	}

	.demo-tip {
		padding: 18rpx;
		font-size: 24rpx;
		text-align: center;
	}

	.search-wrap {
		background-color: #FF593C;
		position: fixed;
		left: 0%;
		top: 0;
		width: 100%;
		z-index: 9;
	}

	.header-box {
		background: url('@/static/home/headBG.png') no-repeat;
		background-size: 100% auto;
		width: 750rpx;
		height: 458rpx;
		border-top: 1rpx solid #FF593C;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
	}

	.search-box {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 710rpx;
		margin: 0 auto;
		padding-top: 32rpx;
		background-color: #FF593C;
		padding-bottom: 32rpx;

		.search-input {
			flex: 1;
			background-color: #fff;
			border-radius: 999rpx;
			height: 62rpx;
			position: relative;

			input {
				height: 100%;
				padding-left: 94rpx;
			}

			.search-icon {
				position: absolute;
				top: 8rpx;
				left: 20rpx;
				width: 48rpx;
				height: 48rpx;
			}

			.hot-search {
				position: absolute;
				top: 14rpx;
				left: 74rpx;
				display: flex;
				align-items: center;
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #8E8E93;
				line-height: 44rpx;

				.large-icon {
					width: 30rpx;
					height: 30rpx;
					margin-left: 28rpx;
				}
			}
		}

		.message {
			width: 44rpx;
			height: 44rpx;
			margin-left: 24rpx;
			flex: none;
		}

		.customer {
			width: 64rpx;
			height: 64rpx;
			flex: none;
		}
	}

	.app-title {
		margin-left: 42rpx;
		margin-bottom: 116rpx;

		.app-title-h1 {
			font-size: 48rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			color: #FFFFFF;
		}

		.app-title-h3 {
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			margin-top: 4rpx;
		}
	}

	.home-content {
		background-color: #F4F5F7;
		border-radius: 32rpx 32rpx 0 0;
		padding: 24rpx 20rpx 100rpx;
		transform: translateY(-32rpx);

		.main-function-menu {
			height: 386rpx;
			background-color: #fff;
			border-radius: 16rpx;
			display: flex;
			flex-wrap: wrap;

			.menu-item {
				text-align: center;
				width: 25%;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				.menu-icon {
					width: 94rpx;
					height: 94rpx;
				}

				.menu-title {
					font-size: 24rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: rgba(0, 0, 0, 0.8);
					margin-top: 16rpx;
				}
			}
		}

		.banner-box {
			margin-top: 24rpx;
			padding: 32rpx 20rpx 0 24rpx;
			background-color: #fff;
			border-radius: 12rpx;

			.swiper {
				height: 344rpx;
			}

			.title-text {
				font-size: 32rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				color: #000000;
				line-height: 46rpx;
			}

			.banner-title {
				display: flex;
				justify-content: space-between;
				align-items: center;

			}

			.banner-title-right {
				display: flex;
				align-items: center;
			}

			.banner-data {
				display: flex;
				justify-content: space-between;
				padding: 32rpx 0;

				.banner-data-item {
					position: relative;

					.list {
						.title {
							font-size: 28rpx;
							font-weight: bold;
							color: #000000;
							line-height: 46rpx;
						}

						.num {
							font-size: 60rpx;
							font-weight: 800;
							color: #FF3B30;
							line-height: 82rpx;
						}

						.proportion {
							font-size: 22rpx;
							color: #FF3B30;
							line-height: 30rpx;
						}
					}
				}

				.banner-data-item::after {
					content: '';
					width: 2rpx;
					height: 136rpx;
					background: #F6F7F9;
					position: absolute;
					right: 0;
					top: 50%;
					margin-top: -68rpx;
				}

				.banner-data-item:first-child,
				.banner-data-item:last-child {
					display: flex;
					align-items: center;
					flex: 1;
				}

				.banner-data-item:last-child {
					justify-content: flex-end;
				}

				.banner-data-item:nth-child(2) {
					width: 250rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}

		.hot-msg {
			margin-top: 24rpx;
			padding: 32rpx 24rpx;
			background-color: #fff;
			border-radius: 12rpx;

			.title-text {
				font-size: 32rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				color: #000000;
				line-height: 46rpx;
			}

			.guide-data {
				height: 428rpx;
				background: linear-gradient(90deg, #FDF8F2 0%, #FECDA7 100%);
				border-radius: 12rpx;
				padding: 32rpx;
				box-sizing: border-box;
				margin-top: 20rpx;

				.sup {
					font-size: 32rpx;
					font-weight: bold;
					color: #000000;
					// line-height: 68rpx;
				}

				.hot {
					display: flex;
					align-items: center;
					margin-top: 16rpx;

					.tip {
						padding: 0 14rpx;
						height: 44rpx;
						line-height: 44rpx;
						background: linear-gradient(138deg, #FF9044 0%, #F9512F 100%);
						border-radius: 8rpx;
						font-size: 24rpx;
						color: #FFFFFF;
					}

					& text {
						font-size: 28rpx;
						color: rgba(0, 0, 0, 0.8);
						line-height: 44rpx;
						padding-left: 8rpx;
					}
				}

				.proportion {
					margin-top: 20rpx;

					.sup {
						font-size: 64rpx;
						font-weight: bold;
						color: #FF3B30;
						line-height: 86rpx;
					}

					.sub {
						font-size: 24rpx;
						color: rgba(0, 0, 0, 0.8);
					}
				}

				.ordering {
					margin-top: 32rpx;
					height: 86rpx;
					background: linear-gradient(270deg, #FF3B30 0%, #FC6146 100%);
					border-radius: 44rpx;
					line-height: 86rpx;
					text-align: center;
					font-size: 28rpx;
					font-family: HarmonyOS_Sans_SC, HarmonyOS_Sans_SC;
					font-weight: normal;
					color: #FFFFFF;
				}
			}

			.subtxt {
				margin-top: 24rpx;
				font-size: 24rpx;
				color: #CCCCCC;
				line-height: 36rpx;
				text-align: center;
			}

			.hot-data {
				.row {
					padding: 32rpx 0;
					border-bottom: 2rpx solid rgba(0, 0, 0, 0.04);

					.li {
						display: flex;
						align-items: center;

						.num {
							font-size: 30rpx;
							font-weight: bold;
							color: #000000;
							line-height: 40rpx;
							margin-right: 28rpx;
							line-height: 40rpx;
							position: relative;
						}

						.text {
							font-size: 28rpx;
							color: #000000;
							line-height: 44rpx;
						}
					}

					.bottom-btn {
						margin-top: 36rpx;
						position: relative;

						.btn-box {
							display: flex;
							align-items: center;
							// justify-content: space-between;
						}

						.btn {
							width: 316rpx;
							height: 61rpx;
							font-size: 28rpx;
							color: #FFFFFF;
							border-radius: 32rpx;
							text-align: center;
							line-height: 61rpx;
						}

						.btn:first-child {
							background: linear-gradient(270deg, #007AFF 0%, #3294FC 100%);
							box-shadow: 0px -4rpx 8rpx 2rpx rgba(50, 148, 252, 0.3);
						}

						.btn:last-child {
							background: linear-gradient(270deg, #FF3B30 0%, #FC6146 100%);
							box-shadow: 0px 4rpx 8rpx 2rpx rgba(252, 97, 70, 0.3);
							margin-left: 12rpx;
						}

						.incline {
							position: absolute;
							left: 312rpx;
							top: -7rpx;
							width: 22rpx;
							height: 75rpx;
							z-index: 1;
							background-color: #fff;
							transform: rotate(20deg);
						}
					}
				}

				.row:last-child {
					border-bottom: 0;
				}

				.row:nth-child(1),
				.row:nth-child(2),
				.row:nth-child(3) {
					.li {
						.num::after {
							content: '';
							width: 23rpx;
							height: 23rpx;
							background: #FF3B30;
							opacity: 0.5;
							filter: blur(2px);
							position: absolute;
							left: 0;
							top: 10rpx;
							border-radius: 50%;
						}
					}
				}

				.row:nth-child(2) {
					.li {
						.num::after {
							background: #FF9500;
						}
					}
				}

				.row:nth-child(3) {
					.li {
						.num::after {
							background: #48484A;
						}
					}
				}
			}

			.more {
				margin: 0 32rpx;
				height: 86rpx;
				border-radius: 44rpx;
				border: 2rpx solid rgba(0, 0, 0, 0.04);
				font-size: 28rpx;
				color: rgba(0, 0, 0, 0.8);
				line-height: 86rpx;
				text-align: center;
			}
		}
	}
</style>